<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">
                首页</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/banner/List' }">
                内容管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>添加轮播图</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-page-header @back="goBack" content="添加轮播图">
            </el-page-header>
            <el-form
                :model="addForm"
                :rules="addFormRules"
                ref="addFormRef"
                label-width="120px"
                hide-required-asterisk
            >
                <el-form-item label="轮播标识" prop="tag">
                    <el-input
                        v-model="addForm.tag"
                        placeholder="请输入轮播标识"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="轮播图片" prop="img_url" align="left">
                    <el-tooltip
                        :enterable="false"
                        effect="dark"
                        content="请上传轮播图片"
                        placement="bottom-end"
                    >
                        <el-upload
                            class="avatar-uploader"
                            action="http://lx2.com/admin/resource/uploadImg?group=baner"
                            :show-file-list="false"
                            :on-success="handleAvatarListSuccess"
                        >
                            <img v-if="img_url" :src="img_url" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                            </el-icon>
                        </el-upload>
                    </el-tooltip>
                </el-form-item>
                <el-form-item
                    label="跳转类型"
                    prop="redirect_type"
                    align="left"
                >
                    <el-select
                        v-model="addForm.redirect_type"
                        placeholder="请选择跳转类型"
                    >
                        <el-option
                            v-for="item in optionsType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="跳转id"
                    v-if="addForm.redirect_type < 4"
                    :prop="addForm.redirect_type < 4 ? 'redirect_id' : ''"
                >
                    <el-input
                        v-model="addForm.redirect_id"
                        placeholder="请输入跳转id"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="跳转链接"
                    v-else
                    :prop="addForm.redirect_type == 4 ? 'redirect_link' : ''"
                >
                    <el-input
                        v-model="addForm.redirect_link"
                        placeholder="请输入跳转链接"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-input
                        type="textarea"
                        autosize
                        v-model="addForm.remarks"
                        placeholder="请输入备注"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="addForm.sort" placeholder="请输入排序" />
                </el-form-item>
                <el-form-item label="状态" align="left">
                    <el-switch
                        v-model="addForm.status"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
                <el-form-item align="left">
                    <el-button type="primary" @click="subAdd">保存</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import requestApis from '@/request'
import { Plus } from '@element-plus/icons'
export default {
    components: {
        Plus
    },
    data () {
        return {
            img_code: '',
            img_url: '',
            optionsType: [
                { value: 0, label: '不跳转' },
                { value: 1, label: '栏目' },
                { value: 2, label: '文章分类' },
                { value: 3, label: '文章' },
                { value: 4, label: '外链' }
            ],
            addForm: {
                tag: '',
                img_url: '',
                redirect_type: 1,
                redirect_id: '',
                redirect_link: '',
                remarks: '',
                sort: 10,
                status: 1
            },
            // 添加表单验证规则对象 tag value_type
            addFormRules: {
                tag: [
                    { required: true, message: '请输入轮播标识', trigger: 'change' },
                    { min: 2, max: 36, message: '轮播标识长度在2~36位之间', trigger: 'blur' }
                ],
                img_url: [
                    { required: true, message: '请上传轮播图片', trigger: 'change' }
                ],
                redirect_type: [
                    { required: true, message: '请选择跳转类型', trigger: 'blur' }
                ],
                redirect_id: [
                    { required: true, message: '请输入跳转目标id', trigger: 'blur' }
                ],
                redirect_link: [
                    { required: true, message: '请输入跳转链接', trigger: 'blur' }
                ],
                remarks: [
                    { min: 2, max: 36, message: '轮播标识长度在2~36位之间', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleAvatarListSuccess (res, file) {
            this.img_url = URL.createObjectURL(file.raw)
            this.img_code = res.data.code
            this.addForm.img_url = res.data.original_url
        },
        goBack () {
            this.$router.back()
        },
        subAdd () {
            this.$refs.addFormRef.validate(valid => {
                if (!valid) {
                    return false
                }
                this.setStatus(this.img_code)
                requestApis.saveBannerAdd(this.addForm).then(res => {
                    if (res.meta.code === 1) {
                        this.$message({
                            message: res.meta.msg,
                            type: 'success'
                        })
                        this.$router.back()
                    } else {
                        this.$message({
                            message: res.meta.msg,
                            type: 'warning'
                        })
                    }
                }).catch(error => {
                    console.log(error)
                })
            })
        },
        setStatus (code) {
            requestApis.setResourceStatus({ code }).then(res => {
                if (res.meta.code === 1) {
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        resetForm () {
            this.$refs.addFormRef.resetFields()
            this.addForm.status = 1
        }
    }
}
</script>

<style>
.el-form {
    width: 60%;
    margin-top: 20px;
}
.avatar-uploader {
    width: 260px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 136px;
    text-align: center;
}
.avatar-uploader-icon svg {
    position: absolute;
    top: 45%;
    left: 45%;
}
.avatar {
    width: 300px;
    display: block;
}
</style>
